<template>
  <div class="take_in">
    <head-top head-title="立即参与" go-back="true"></head-top>
    <form action="">
      <div class="candidate-wrapper">
        <!--每条选项-->
        <div class="all_box" v-for="(item,index) in satisList" :key="index">
          <div class="candidate">
            <div class="introduce">
              <div class="word_bottom">
                <p>{{item.title}}</p>
                <span v-show="item.article_id!==null"
                      @click="$router.push('/home/TakeInResult/'+item.article_id)">查看详细</span>
              </div>
            </div>
            <!--选项类别-->
            <div class="answer">
              <label v-show="verySatisfied === 'verySatisfied'" :for="`${1}_${item.id}_${item.resultId}`">
                <input ref="dis" class="same" type="radio" :name="item.resultId"
                       :value="`${1}_${item.id}_${villageId}_${userId}`"
                       :id="`${1}_${item.id}_${item.resultId}`">
                <span></span>非常满意
              </label>
              <label v-show="MoreSatisfied === 'MoreSatisfied'" :for="`${2}_${item.id}_${item.resultId}`">
                <input ref="dis" class="same" type="radio" :name="item.resultId"
                       :value="`${2}_${item.id}_${villageId}_${userId}`"
                       :id="`${2}_${item.id}_${item.resultId}`">
                <span></span>比较满意
              </label>
              <label v-show="satisfied === 'satisfied'" :for="`${6}_${item.id}_${item.resultId}`">
                <input ref="dis" class="same" type="radio" :name="item.resultId"
                       :value="`${6}_${item.id}_${villageId}_${userId}`"
                       :id="`${6}_${item.id}_${item.resultId}`">
                <span></span>满意
              </label>
              <label v-show="BasicSatisfied === 'BasicSatisfied'" :for="`${3}_${item.id}_${item.resultId}`">
                <input ref="dis" class="same" type="radio" :name="item.resultId"
                       :value="`${3}_${item.id}_${villageId}_${userId}`"
                       :id="`${3}_${item.id}_${item.resultId}`">
                <span></span>基本满意
              </label>
              <label v-show="GeneralSatisfied === 'GeneralSatisfied'" :for="`${7}_${item.id}_${item.resultId}`">
                <input ref="dis" class="same" type="radio" :name="item.resultId"
                       :value="`${7}_${item.id}_${villageId}_${userId}`"
                       :id="`${7}_${item.id}_${item.resultId}`">
                <span></span>一般满意
              </label>
              <label v-show="NotVerySatisfied === 'NotVerySatisfied'" :for="`${8}_${item.id}_${item.resultId}`">
                <input ref="dis" class="same" type="radio" :name="item.resultId"
                       :value="`${8}_${item.id}_${villageId}_${userId}`"
                       :id="`${8}_${item.id}_${item.resultId}`">
                <span></span>不太满意
              </label>
              <label v-show="discontent === 'discontent'" :for="`${4}_${item.id}_${item.resultId}`">
                <input ref="dis" class="same" type="radio" :name="item.resultId"
                       :value="`${4}_${item.id}_${villageId}_${userId}`"
                       :id="`${4}_${item.id}_${item.resultId}`">
                <span></span>不满意
              </label>
              <label v-show="VeryDissatisfied === 'VeryDissatisfied'" :for="`${9}_${item.id}_${item.resultId}`">
                <input ref="dis" class="same" type="radio" :name="item.resultId"
                       :value="`${9}_${item.id}_${villageId}_${userId}`"
                       :id="`${9}_${item.id}_${item.resultId}`">
                <span></span>非常不满意
              </label>
              <label v-show="incomprehension === 'incomprehension'" :for="`${5}_${item.id}_${item.resultId}`">
                <input ref="dis" class="same" type="radio" :name="item.resultId"
                       :value="`${5}_${item.id}_${villageId}_${userId}`"
                       :id="`${5}_${item.id}_${item.resultId}`">
                <span></span>不了解
              </label>
            </div>
          </div>
          <div class="all_line"></div>
        </div>
        <div class="view_des">
          <div class="box_title border-bottom">
            <span>总体整改建议：</span>
          </div>
          <text-publish @getValue="getValue" :holder="holder"></text-publish>
        </div>
      </div>
    </form>
    <div class="confirmbtn">
      <button @click="voteSubmit">
        <span>确认提交</span>
      </button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .take_in {
    width: 100%;
    padding-top: 40px;
    .candidate-wrapper {
      .all_box {
        width: 100%;
        .candidate {
          padding: 10px;
          .introduce {
            width: 100%;
            height: 44px;
            .word_bottom {
              height: 22px;
              line-height: 44px;
              p {
                font-size: 15px;
                float: left;
                color: #292929;
                width: 180px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              span {
                float: right;
                font-size: 13px;
                color: #0078de;
              }
            }
          }
          .answer {
            text-align: center;
            font-size: 16px;
            border: 1px solid #d9d9d9;
            border-radius: 5px;
            padding-left: 10px;
            display: inline-table;
            padding-bottom: 10px;
            width: 97%;
            label {
              width: 33%;
              float: left;
              margin-top: 15px;
            }
            .same {
              display: none;
            }
            span {
              position: relative;
              background-color: #fff;
              border: 1px solid rgba(0, 0, 0, 0.15);
              border-radius: 100%;
              display: inline-block;
              height: 16px;
              margin-right: 4px;
              float: left;
              vertical-align: middle;
              width: 16px;
              line-height: 1;
            }
            .same:checked + span:after {
              position: absolute;
              top: 3px;
              left: 3px;
              background-color: #0078de;
              border-radius: 100%;
              content: "";
              display: inline-block;
              height: 10px;
              width: 10px;
            }
            .same:checked:after {
              border-radius: 0;
            }
          }
          .line_gray {
            width: 100%;
            height: 5px;
            background: #f2f2f2;
          }
        }
        .all_line {
          width: 100%;
          height: 10px;
          background: #f2f2f2;
        }
      }
      .view_des {
        width: 100%;
        padding-bottom: 50px;
        .box_title {
          width: 100%;
          padding: 13px 0;
          span {
            font-size: 15px;
            color: #666666;
            margin-left: 10px;
          }
        }
      }
    }
    .confirmbtn {
      width: 100%;
      height: 44px;
      text-align: center;
      position: fixed;
      z-index: 2;
      bottom: 0;
      button {
        width: 100%;
        height: 44px;
        background: #0078de;
        outline: none;
        border-radius: 0;
        span {
          font-size: 15px;
          color: #fff;
        }
      }
      .pad0 {
        padding-top: 40px;
        padding-bottom: 0;
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import TextPublish from '../../components/common/textPublish'
  import { getSatisfactionVote } from '../../api/satisfaction'
  import {
    loadVillageId,
    loadUserId
  } from '../../common/js/cache.js'
  import commonUrl from '../../common/js/commonUrl.js'
  import qs from 'qs'
  import $ from 'jquery'
  import { Toast, Indicator } from 'mint-ui'

  export default {
    name: 'TakeIn',
    data () {
      return {
        opinions: '', // 意见反馈字段
        holder: '请您宝贵的建议...',
        villageId: loadVillageId(), // 小区id
        userId: loadUserId(), // 用户id
        satisList: [], // 选项列表
        // 各个单选控制
        verySatisfied: '', // 非常满意
        MoreSatisfied: '', // 比较满意
        BasicSatisfied: '', // 基本满意
        GeneralSatisfied: '', // 一般满意
        satisfied: '', // 满意
        NotVerySatisfied: '', // 不太满意
        discontent: '', // 不满意
        VeryDissatisfied: '', // 非常不满意
        incomprehension: '' // 不了解
      }
    },
    created () {
      this._getSatisfactionVote()
    },
    methods: {
      // 选项数据
      _getSatisfactionVote () {
        getSatisfactionVote(this.$route.params.id).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.satisList = res.data.satisfaction
            // console.log(this.satisList)
            // 每个选项控制显示
            this.verySatisfied = res.data.type.verySatisfied // 非常满意
            this.MoreSatisfied = res.data.type.MoreSatisfied // 比较满意
            this.BasicSatisfied = res.data.type.BasicSatisfied // 基本满意
            this.GeneralSatisfied = res.data.type.GeneralSatisfied // 一般满意
            this.satisfied = res.data.type.satisfied // 满意
            this.NotVerySatisfied = res.data.type.NotVerySatisfied // 不太满意
            this.discontent = res.data.type.discontent // 不满意
            this.VeryDissatisfied = res.data.type.VeryDissatisfied // 非常不满意
            this.incomprehension = res.data.type.incomprehension // 不了解
          }
        })
      },
      // 获取意见反馈的建议
      getValue (value) {
        this.opinions = value
      },
      // 提交按钮
      voteSubmit () {
        const url = `${commonUrl.apihost}index.php/home/satisfaction_vote/setSatisfaction`
        // 获取form表单中的值
        var dataStr = $('form').serialize()
        // 字符串拼接成后台想要的数据
        var dataArr = dataStr.split('=').join('_').split('&')
        // 投票的数据
        var datas = []
        dataArr.forEach((item, index) => {
          datas.push(item.split('_'))
        })
        if (datas.length !== this.satisList.length) {
          Toast({
            message: '还有投票未投',
            position: 'middle',
            duration: 1500
          })
          return
        }
        Indicator.open({
          text: '投票中...',
          spinnerType: 'fading-circle'
        })
        const data = {
          content: this.opinions,
          data: datas
        }
        this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
          // console.log(res)
          if (res.data.code === 200) {
            Indicator.close()
            // flag  1:表示跳转0：表示不跳转
            if (res.data.data.flag === 1) {
              if (res.data.data.data.type === 'vote') {
                this.$router.replace('/home/Vote/' + res.data.data.data.id)
              } else if (res.data.data.data.type === 'voting') {
                this.$router.replace('/home/voting/' + res.data.data.data.id)
              } else if (res.data.data.data.type === 'TakeIn') {
                this.$router.replace('/home/TakeIn/' + res.data.data.data.id)
                this.$router.go(0) // 刷新
                this._getSatisfactionVote()
              }
            } else if (res.data.data.flag === 0) {
              // this.$router.go(-6)
              this.$router.replace('/home')
            }

            Toast({
              message: res.data.data.message,
              position: 'middle',
              duration: 1000
            })
          }
          if (res.data.code === 400) {
            Indicator.close()
            this.$router.go(0)
          }
        })
      }
    },
    components: {
      headTop,
      TextPublish
    }
  }
</script>
